<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>耽美主题新闻网页</title>
    <!--引入外部样式-->
    <link href="css/details1.css" type="text/css" rel="stylesheet">
    <link href="css/details2.css" type="text/css" rel="stylesheet">
    <link href="css/details3.css" type="text/css" rel="stylesheet">
    <link href="css/details4.css" type="text/css" rel="stylesheet">
    <link href="css/details5.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--页面的头部-->
<div id="header">
    <!--头部的顶部-->
    <div class="main-top">
        <div class="logo"><a href="#"><span>彩虹颜色</span></a></div>
        <!--登陆框-->
        <div class="login-box">
            <form>
                <label>用户名</label><input type="text">
                <label>密码</label><input type="password">
                <button>登陆</button>
            </form>
        </div>
        <!--导航-->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">帮助</a></li>
                <li><a href="#">用户注册</a></li>
            </ul>
        </div>
    </div>
   <!--banner 图-->
    <div class="main-banner">
        <img src="images/banne.png">
    </div>
</div>
<!--页面的主体-->
<div id="content">
    <!--搜索框-->
    <div class="search-box">
        <div class="sl">
            <div class="sr clearfix">
                <span class="left-search clearfix">
                    <label>站内搜索</label>
                    <input type="text" value="关键词">
                </span>
                <span class="right-link">
                    <label>快速链接</label>
                    <select>
                        <option>--专题选择--</option>
                        <option>动漫</option>
                        <option>真人剧</option>
                        <option>广播剧</option>
                        <option>周边</option>
                        <option>漫画</option>
                        <option>小说</option>
                        <option>主题曲</option>
                        <option>……</option>
                    </select>
                </span>
            </div>
        </div>
    </div>
    <div class="main-content clearfix">
        <!--主体的左边-->
        <div class="main-content-left">
            <div class="class-box">
                <div class="class-box-header">
                    <span class="fr"><a>更多...</a></span>
                    <h3>最新动漫</h3>
                </div>
                <div class="class-box-content">
                    <ul>
                        <li><a href="#">国漫</a></li>
                        <li><a href="#">日漫</a></li>
                        <li><a href="#">纯情</a></li>
                        <li><a href="#">冒险</a></li>
                        <li><a href="#">青春</a></li>
                        <li><a href="#">热血</a></li>
                        <li class="clear-bottom-line"><a href="#">爱情</a></li>
                    </ul>
                </div>
            </div>
            <!--最新新闻-->
            <div class="left-box">
                <div class="left-box-tbg">
                    <div class="left-box-header">
                        <h3><a href="#">最新主题曲</a></h3>
                    </div>
                    <div class="left-box-content">
                        <ul>
                            <li class="li-line"></a></li>
                            <li><a href="#">帝王攻略( 语笑阑珊小说《帝王攻略》动画主题曲) - 俞梦乐</a></li>
                            <li class="li-line"></a></li>
                            <li><a href="#">醉梦前尘(墨香铜臭小说《魔道祖师》动漫主题曲) - 林志炫</a></li>
                            <li class="li-line"></a></li>
                            <li><a href="#">悦神(墨香铜臭小说《天官赐福》主题曲) - KBShinya</a></li>
                            <li class="li-line"></a></li>
                            <li><a href="#">撒野(巫哲小说《撒野》官方主题曲) - 凯瑟喵</a></li>
                            <li class="li-line"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--最新评论-->
            <div class="left-box">
                <div class="left-box-tbg">
                    <div class="left-box-header">
                        <h3><a href="#">最新广播剧</a></h3>
                    </div>
                    <div class="left-box-content">
                        <ul>
                            <li class="li-line"></a></li>
                            <li><a href="#">杏仁茶小说《近似孤独》 翼之声出品</a></li>
                            <li class="li-line"></a></li>
                            <li><a href="#">南康白起小说《我等你到三十五岁》 猫耳FM出品</a></li>
                            <li class="li-line"></a></li>
                            <li><a href="#">无仪宁死小说《最爱你的那十年》 恋声控出品</a></li>
                            <li class="li-line"></a></li>
                            <li><a href="#">春茶娘小说《救赎》 春色惊鸿出品</a></li>
                            <li class="li-line"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--主体的右边-->
        <div class="main-content-right">
            <div class="main-text-box">
                <div>
                    <div class="main-text-box-bbg">
                        <!--新闻标题-->
                        <div class="main-text-box-header">
                            <h3>2020年最新榜首</h3>
                        </div>
                        <!--新闻列表-->
                        <div class="main-text-box-content">
                            <ul class="news-list-ul clearfix">
                                <br>
                                <li><a href="#"><b>【小说】</b></a></li>
                                <li class="li-line">
                                    <span><b>墨香铜臭原著</b></span>
                                    <a href="#">《魔道祖师》是一部由墨香铜臭所著的原创耽美玄幻小说，主线道侣携手打怪解谜。</a>
                                </li><br>
                                <li><a href="#"><b>【动画】</b></a></li>
                                <li class="li-line">
                                    <span><b>中村春菊原著</b></span>
                                    <a href="#">《世界第一初恋》是根据中村春菊创作的同名漫画改编的动画作品，</a>
                                </li><br>
                                <li><a href="#"><b>【漫画】</b></a></li>
                                <li class="li-line">
                                    <span><b>昔谣原著</b></span>
                                    <a href="#">《声色深处》是连载中的一部蔷薇类漫画，作者是昔谣。</a>
                                </li><br>
                                <li><a href="#"><b>【动漫】</b></a></li>
                                <li class="li-line">
                                    <span><b>中村春菊原著</b></span>
                                    <a href="#">《纯情罗曼史》是由今千秋执导、樱井孝宏,花田光,伊藤健太郎,神奈延年主演的动漫。</a>
                                </li><br>
                                <li><a href="#"><b>【广播剧】</b></a></li>
                                <li class="li-line">
                                    <span><b>公子喜欢原著</b></span>
                                    <a href="#">《纨绔》古风玄幻耽美广播剧星之声轻薄の假相的节目。</a>
                                </li><br><br>
                                <li><b>更多系列即将上线敬请期待！！！！！！</b></li>
                            </ul>
                        </div>
                        <!--图片新闻-->
                        <div class="news-pic">
                            <dl>
                                <dt><img src="images/right01.png"></dt>
                                <dd id="d1">
                                    <a>《帝王攻略》</a><br>
                                    <b>楚渊&段白月</b>
                                </dd>
                            </dl>
                            <dl>
                                <dt><img src="images/right02.png"></dt>
                                <dd id="d2">
                                    <a>《魔道祖师》</a><br>
                                    <b>蓝湛&魏婴</b>
                                </dd>
                            </dl>
                            <dl>
                                <dt><img src="images/right03.png"></dt>
                                <dd id="d3">
                                    <a>《天官赐福》</a><br>
                                    <b>花城&谢怜</b>
                                </dd>
                           </dl>
                            <dl>
                                <dt><img src="images/right04.png"></dt>
                                <dd id="d4">
                                    <a>《撒野》</a>
                                    <b>顾飞&蒋丞</b>
                                </dd>
                            </dl>
                        </div>
                        <!--分页导航-->
                        <div class="page-bar">
                            <ul class="page-num-ul clearfix">
                                <li><a href="#">首页</a></li>
                                <li><a href="#">上一页</a></li>
                                <li><a href="#" class="thisclass">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">下一页</a></li>
                                <li><a href="#">最后一页</a></li>
                            </ul>
                            <span class="page-go-form">
                                <label>跳转到</label>
                                <input type="text" class="page-key">页
                                <button type="submit">GO</button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--页面的尾部-->
    <div id="footer" class="main-footer-box">
        24小时客户服务热线：010-1234323 常见问题解答 新闻热线：023323423<br />
        文明办网文明上网举报电话：010-6222288 举报邮箱：jubssao@qq.com.cn<br />
        Coyright&copy;1999-2017 News China gov,All Right Reserved.<br />
        新闻中心版权所有
    </div>
</div>

</body>
</html>